<template>
  <div class="v-container">
    vant

    <!-- <van-button type="primary">按钮</van-button>
    <van-button type="info">按钮</van-button>
    <van-button type="default">按钮</van-button>
    <van-button type="warning">按钮</van-button> -->
    <van-button @click="handleClick" :loading="loading" type="info" loading-text="加载中...">提交</van-button>
    <h1>icon</h1>
    <van-icon name="chat-o" />
    <!-- <h1 style="margin-bottom: 500px">image:</h1> -->
    <van-image width="100" height="100" lazy-load round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
    <!-- 行 -》 高 -->
    <van-row>
      <van-col span="8">span: 8</van-col>
      <van-col span="8">span: 8</van-col>
      <van-col span="8">span: 8</van-col>
    </van-row>
    <!-- popup -->
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <!-- <van-popup v-model="show">内容</van-popup> -->
    <van-popup v-model="show" position="top" :style="{ height: '30%' }" />
    <button @click="handleToast">点击出现toast</button>
    <van-cell title="选择单个日期" :value="date" @click="show = true" />
    <van-calendar v-model="show" type="multiple" @confirm="onConfirm" />
    <!-- form -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <!-- <van-rate v-model="value" /> -->
    <van-rate v-model="value" />
    <!-- 凡是有v-model的。都需要使用watch或者update -->
  </div>
</template>
<script>
import Vue from 'vue'
import { Lazyload, Toast } from 'vant'

Vue.use(Lazyload)
Vue.use(Toast)
export default {
  data() {
    return {
      value: 1,
      loading: false,
      show: false,
      date: '',
      username: '',
      password: '',
    }
  },
  watch: {
    show(v) {
      console.log('newVal:', v)
    },
    value(v) {
      console.log(v, 'v')
      this.value = 3
    },
  },
  created() {},
  updated() {
    // this.value = 3
    console.log(this.show, 'show')
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm(date) {
      this.show = false
      this.date = this.formatDate(date)
      console.log(this.date, 'date')
    },
    handleToast() {
      // Toast('提示内容')
      this.$toast({
        type: 'loading',
        message: '提示文字...',
        icon: 'chat-o',
        overlay: true,
        onClose() {
          console.log('关闭')
        },
      })
    },
    showPopup() {
      this.show = true
    },
    handleClick() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000)
    },
  },
}
</script>
